<template>
  <div>
    <van-nav-bar title="更多设置"
    :fixed=true
    left-arrow
     @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div>
      <ul class="setting">
        <li v-tap="{methods:address}"><span>收货地址</span><span><van-icon name="arrow" /></span></li>
        <li v-tap="{methods:help}"><span>帮助</span><span><van-icon name="arrow" /></span></li>
        <li><span>版本号</span><span>{{ban}}</span></li>
        <li v-tap="{methods:more}"><span>退出登录</span></li>
      </ul>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        description="确认退出登录"
        cancel-text="取消"
        @cancel="onCancel"
        @select="onSelect"
      />
    </div>

  </div>
</template>

<script>
  export default{
    name:'More',
    data(){
      return{
        ban:'3.4.0',
         show: false,
         actions: [
           { name: '退出登录', color: '#f00'}
         ],
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      address(){
        this.$router.push('/address')
      },
      help(){
        this.$router.push('/Help')
      },
      onCancel() {
        this.show = false;
      },
      onSelect(item,index){
        // this.$toast('点击了退出登录')
        localStorage.removeItem('name')
        localStorage.removeItem('username')
        localStorage.removeItem('uid')
        localStorage.removeItem('img')
         this.$router.push('/index')
      },
      more(){
        this.show=true
      }
    }
  }
</script>

<style scoped="">
  .van-hairline--bottom{
    border-bottom:1px solid #e2e2e2 ;
  }
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 20px;
    font-weight: 600;
  }
  .setting{
    width:100% ;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: -16px;
    font-weight: 600;
   }
   .setting li{
     padding: 0 20px;
     display: flex;
      justify-content: space-between;
      align-items: center;
     font-size: 18px;
     height: 60px;
     border-bottom: 1px solid #CCCCCC;
   }
   .setting li span:nth-child(2){
     color: #c8c8c8;
   }
</style>
